<template lang="html">
<div>
  <div class="tab">
     <router-link to="/index" >
         <span class="icon-yuan" @click ="disa()" v-if="la == 1" >
           <br />ONE
         </span>
         <span class="icon-yuan  col"  v-if ="la == 0" >
           <br />ONE
         </span>

     </router-link>
     <router-link to="/all">
       <span class="icon-caidan" @click ="disb()" v-if="lb == 1" >
         <br />ALL
       </span>
       <span class="icon-caidan col" @click ="disb()" v-if="lb == 0" >
         <br />ALL

       </span>
     </router-link>
     <router-link to="/login" >
       <span class="icon-geren" @click ="disc()" v-if="lc == 1" >
 <br />ME
       </span>
       <span class="icon-geren .col" @click ="disc()" v-if="lc == 0" >
 <br />ME
       </span>
    </router-link>
 </div>
 <router-view></router-view>
</div>
</template>

<script>
export default {
  data(){
   return{
     la:1,
     lb:1,
     lc:1
   }
 },
 methods:{

  disa(){
    this.la = 0
  },
  disb(){
    this.lb = 0

  },
  disc(){
    this.lc = 0

  },
 }
}
</script>

<style lang="css">
.tab{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 4rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgb(255,255,255);
    z-index: 888;
}
.icon-yuan:before{
  content:'\e906';
  font-size: rem;
  /*color:#dfdfdf;*/

}
.icon-caidan:before{
  content:'\e902';
  font-size: 2rem;
  /*color:#dfdfdf;*/

}
.col{
  color:#000!important;
}
.icon-geren:before{
  content:'\e909';
  font-size: 2rem;
  /*color:#dfdfdf;*/
}

.router-link-active{
  color:#000;
  font-weight: 700;
}


</style>
